<template>
  <div class="layout_con">
    <HeadNav page-name="提现中金额" :borderType="true" :showNav="true" />
    <div class="stay_settlement_earnings">
      <div class="settlement_title">
        <div class="settlement_money">
          <div style="width: fit-content;">当前已提现总金额</div>
          <div class="settlement_amount">¥<span>{{amountInWithdrawal | rounding}}</span></div>
        </div>
        <!-- <div class="orders_num"><span>继续提现</span></div> -->
      </div>
      <div class="stay_settlement_order">
        <div style="font-weight: 500;">提现记录</div>
        <div class="screen_order" @click="showScreen = true">
          筛选<img
            class="screen_img"
            src="https://image.qqpyyds.com/mpAppImg/icon/jiantou4_icon.png"
          />
        </div>
      </div>
      <scroll-view v-if="profitList.length>0" class="scroll_order_list" :class="{ 'scroll_order_ios': isIOS }" @scrolltolower="scrolltolowerFn" :scroll-anchoring="true" :scroll-y="true">
        <div
          class="order_list"
          v-for="(item, index) in profitList"
          :key="index"
        >
          <div class="groupon_order">
            <div>{{item.title}}</div>
            <span>¥{{item.withdrawMoney}}</span>
          </div>
          <div class="groupon_amount">
            <div>{{item.createTime}}</div>
            <span>提现中</span>
          </div>
        </div>
        <div class="no_more" v-if="notDataType">没有更多了~</div>
      </scroll-view>
      <view class="noData_box" v-else>
        <view class="flex-col items-center order-default">
          <image
            src="https://image.qqpyyds.com/mpAppImg/noneImg/search_default_img.png"
            class="order-default-image"
            mode="aspectFill"
          />
          <text class="order-default-text">暂无提现记录~</text>
        </view>
      </view>
    </div>
    <!-- 筛选 -->
    <u-popup :safe-area-inset-bottom="true" width="550" mode="right" v-model="showScreen" @close="closeScreenFn">
			<view class="content_scroll" :class="{ 'content_scroll_ios': isIOS }">
				<scroll-view class="screen_scroll" scroll-y="true" style="">
					<view>
						<div class="screening_text">筛选</div>
            <div>
              <div class="interval_text">时间区间</div>
              <view class="my-release-all_two">
                <view
                  :class="{ active_all: activeAll === index }"
                  class="my-release-all"
                  v-for="(all, index) in allList"
                  :key="index"
                  @click.stop="allListIndex(index)"
                >
                  {{ all.cat_name }}
                </view>
              </view>
            </div>
            <div v-if="activeAll == 4">
              <div class="interval_text">自定义时间</div>
              <view style="display: flex; align-items: center;">
                <view class="my-release-all" @click.stop="customTime(0)">{{startTime}}</view>
                <view class="separated"></view>
                <view class="my-release-all" style="margin: 0;" @click.stop="customTime(1)">{{endTime}}</view>
              </view>
            </div>
					</view>
				</scroll-view>
				<view class="confrim_btn" :class="{ 'confrim_btn_ios': isIOS }">
					<div class="confrim_cancel" @click="showScreen = false;">取消</div>
					<div class="confrim_screening" @click.stop="screening">筛选</div>
				</view>
			</view>
		</u-popup>
    <!-- 筛选时间 -->
    <u-picker mode="time" confirm-color="#e44435" confirm-text="确定" :end-year="currentYears" v-model="showTime" @confirm="timeConfirm" :params="params"></u-picker>
  </div>
</template>
<script>
import HeadNav from "@/components/headNav/index.vue";
import Money from '@/api/money.js'
import { currentTime, sevenDaysLater } from "@/utils/formTime.js"
export default {
  name: "staySettlement",
  components: { HeadNav },
  data() {
    return {
      isIOS: uni.getSystemInfoSync().system.indexOf("Android") !== 0,
      withdrawal: null,
      amountInWithdrawal: 0,
      profitList: [],
      showScreen: false,
      allList: [
        {
          cat_name: "全部",
        },
        {
          cat_name: "今天",
        },
        {
          cat_name: "七天",
        },
        {
          cat_name: "最近一个月",
        },
        {
          cat_name: "自定义",
        }
      ],
      activeAll: 0,
      showTime: false,
      // 用于获取当前年份
      currentYears: '',
      startTime: '',
      endTime: '',
      // 需要显示的参数
      params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
      customIndex: null,
      notDataType: false,
      pageSize: 20,
      currentPage: 1,
      lastTimeData: {
        activeAll: 0,
        startTime: '',
        endTime: '',
      },
    }
  },
  onLoad () {
    let year = new Date().getFullYear()
    this.currentYears = year
    // this.startTime = currentTime(2)
    // this.endTime = currentTime(2)
    this.getInWithdrawalList()
  },
  methods: {
    closeScreenFn () {
      this.showScreen = false
      this.activeAll = this.lastTimeData.activeAll
      this.startTime = this.lastTimeData.startTime
      this.endTime = this.lastTimeData.endTime
    },
    async getInWithdrawalList() {
      let params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      }
      if (this.startTime) {
        params = {
          ...params,
          startTime: this.startTime
        }
      }
      if (this.startTime) {
        params = {
          ...params,
          endTime: this.endTime
        }
      }
      this.lastTimeData = { // 存下历史选项
        activeAll: this.activeAll,
        startTime: this.startTime,
        endTime: this.endTime,
      }
      Money.getInWithdrawalList(params).then(res => {
        if (res.code === 200 && res.data !== {}) {
          this.amountInWithdrawal = res.data.amountInWithdrawa
          if (this.profitList.length>0) {
            this.profitList = this.profitList.concat(res.data.ipage.records)
          } else {
            this.profitList = res.data.ipage.records
          }
          if (res.data.ipage.records.length<this.pageSize) {
            this.notDataType = true
          } else {
            this.notDataType = false
          }
        }
      })
    },
    // 时间区间
    allListIndex (index) {
      this.activeAll = index
      if (index == 0) {
        this.startTime = ''
        this.endTime = ''
      }
      if (index == 1) {
        this.startTime = currentTime(2)
        this.endTime = currentTime(2)
      }
      if (index == 2) {
        this.startTime = currentTime(2)
        this.endTime = sevenDaysLater(-7,2)
      }
      if (index == 3) {
        this.startTime = currentTime(2)
        this.endTime = sevenDaysLater(-30,2)
      }
      if (index == 4) {
        if (!this.startTime) {
          this.startTime = currentTime(2)
        }
        if (!this.endTime) {
          this.endTime = currentTime(2)
        }
      }
    },
    // 筛选时间确定事件
    timeConfirm (e) {
      console.log(e, '筛选时间确定事件');
      let current = e.year + '-' + e.month + '-' + e.day
      if (this.customIndex === 0) {
        this.startTime = current
      } else this.endTime = current
    },
    customTime (num) {
      this.showTime = true
      this.customIndex = num
    },
    scrolltolowerFn () {
      ++this.currentPage
      this.getInWithdrawalList()
    },
    // 确认筛选
    screening () {
      this.showScreen = false
      this.currentPage = 1
      this.profitList = []
      this.getInWithdrawalList()
    }
  },
  filters: {
    // 只显示到两位小数点
    rounding (value) {
      return value>0?value.toFixed(2):0.00
    },
  }
};
</script>
<style lang="scss" scoped>
.layout_con {
  background: #f2f3f5;
}
.stay_settlement_earnings {
  height: calc(100vh - 60px);
}
.noData_box {
  width: 100%;
  height: calc(100vh - 273px);
}
// 当前待结算
.settlement_title {
  display: flex;
  align-items: center;
  height: 202rpx;
  background: linear-gradient(125deg, #f37965 12%, #e44435);
  color: #fff;
  div {
    width: 50%;
  }
  .settlement_money {
    padding-left: 32rpx;
    padding-top: 48rpx;
    font-size: 28rpx;
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.2) 3%,
      rgba(255, 255, 255, 0) 66%
    );
    .settlement_amount {
      margin-top: 16rpx;
      span {
        font-size: 36rpx;
        padding-left: 10rpx;
      }
    }
  }
  .orders_num {
    padding-right: 32rpx;
    text-align: right;
    opacity: 0.8;
    font-size: 24rpx;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-bottom: 46rpx;
    span {
      border: 2rpx solid #ffffff;
      border-radius: 32rpx;
      padding: 4rpx 16rpx;
    }
  }
}

// 待结算订单
.stay_settlement_order {
  background: #fff;
  height: 96rpx;
  margin-top: 24rpx;
  padding: 0 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 32rpx;
  color: rgba(0, 0, 0, 0.9);
  box-shadow: 0rpx -2rpx 0rpx 0rpx #eeeeee inset;
  .screen_order {
    color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    .screen_img {
      width: 32rpx;
      height: 32rpx;
    }
  }
}

// 订单列表
.scroll_order_list {
  background: #f2f3f5;
  height: calc(100vh - 221px);
  &.scroll_order_ios {
    height: calc(100vh - 251px);
  }
}
.order_list {
  // height: calc(100vh - 84px - 101px -48px);
  // overflow: hidden;
  padding: 24rpx 32rpx;
  background: #fff;
  .groupon_order {
    display: flex;
    justify-content: space-between;
    font-size: 28rpx;
    font-weight: 500;
    color: #323233;
    margin-bottom: 16rpx;
  }
  .groupon_amount {
    display: flex;
    justify-content: space-between;
    color: #969799;
    font-size: 24rpx;
  }
}

// 没有更多了
.no_more {
  font-size: 24rpx;
  color: #969799;
  margin: 24rpx 0 34rpx;
  text-align: center;
}

// 筛选样式开始
.content_scroll {
  margin-top: 68px;
  &.content_scroll_ios {
    margin-top: 84px;
  }
}
.screen_scroll {
  padding-left: 24rpx;
}
.screening_text {
  font-size: 32rpx;
  font-weight: 500;
  color: #323233;
}
.interval_text {
  font-size: 28rpx;
  color: #323233;
  margin: 48rpx 0 24rpx;
}

.my-release-all {
  width: fit-content;
  padding: 0 28rpx;
  height: 56rpx;
  background: #f2f3f5;
  border-radius: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #969799;
  margin-right: 24rpx;
}
.my-release-all_two {
  display: flex;
  flex-wrap: wrap;
  .my-release-all {
    margin-bottom: 20rpx;
  }
}
.active_all {
  color: #fff;
  background: #fb9551;
}

.separated {
  width: 32rpx;
  height: 2rpx;
  border: 2rpx solid #979797;
  margin-right: 24rpx;
}

.confrim_btn {
  position: fixed;
  bottom: 0;
  display: flex;
  height: 112rpx;
  width: 100%;
  font-size: 32rpx;
  color: rgba(0,0,0,0.90);
  &.confrim_btn_ios {
    bottom: 22px;
  }
  div {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .confrim_cancel {
    box-shadow: 0rpx 2rpx 0rpx 0rpx #eeeeee inset; 
  }
  .confrim_screening {
    color: #fff;
    background: #e44435;
  }
}
</style>

